<template>
  <customContainer :config="config" />
</template>

<script setup lang="ts" name="AirSeaTransportIndex">
import { ref, getCurrentInstance, computed, reactive } from 'vue'
import { ElButton } from 'element-plus'
import { useRouter } from 'vue-router'
import { DictDirection } from '@/store/modules/dicts'
import { getSeaAirTransportFinanceAccountlist } from '@/api/finance/receiverManange'
import { tableItem, indexObject } from '../receiveabeTypes'

const router = useRouter()
const {
  appContext: {
    config: {
      globalProperties: { $download },
    },
  },
} = getCurrentInstance()

const multipleSelection = ref<tableItem[]>([])
const queryParams = reactive<indexObject>({
  pageSize: 10,
  pageNum: 1,
  customerName: undefined,
  serialNo: undefined,
  ywymc: undefined,
  endDate: undefined,
  sszd: undefined,
  zdzt: undefined,
  qd: undefined,
})
const exportLoading = ref<boolean>(false)
const exportOrderLoading = ref<boolean>(false)

const config = computed({
  get() {
    return {
      query: {
        fields: [
          {
            type: 'select',
            label: '客户名称',
            prop: 'customerCode',
            option: {
              dictInfo: { dict: DictDirection.客户 },
            },
          },
          {
            label: '账单编号',
            prop: 'serialNo',
          },
          {
            type: 'select',
            label: '业务员',
            prop: 'ywymc',
            option: {
              dictInfo: { dict: DictDirection.业务员 },
            },
          },
          {
            type: 'date-picker',
            label: '账单时间',
            prop: 'endDate',
            option: {
              type: 'date',
            },
          },
          {
            type: 'select',
            label: '所属站点',
            prop: 'sszd',
            option: {
              dictInfo: { dict: DictDirection.收货站点 },
            },
          },
          {
            label: '账单状态',
            prop: 'status',
          },
          {
            label: '渠道',
            prop: 'qd',
          },
        ],
        queryParams,
        formOption: {},
      },
      btns: [
        {
          title: '导出账单',
          type: 'primary',
          loading: exportLoading.value,
          onClick: (e) => {
            exportLoading.value = true
            const data = queryParams
            $download(
              'finance/seaAirTransportFinanceAccount/listExport', 
              data, 
              `空海运账单_${ new Date().getTime() }.xlsx`,
            )
            .finally(() => {
              exportLoading.value = false
            })
          },
        },
        {
          title: '导出账单及订单',
          type: 'danger',
          loading: exportOrderLoading.value,
          onClick(e) {
            const data:indexObject = {}
            if (multipleSelection.value.length) {
              data.serialNo = multipleSelection.value.map(i => i.serialNo).join(',')
            }
            exportOrderLoading.value = true
            $download(
              'finance/seaAirTransportFinanceAccount/listDetailsExport', 
              data, 
              `空海运账单详情_${ new Date().getTime() }.xlsx`,
            ).finally(() => {
              exportOrderLoading.value = false
            })
          },
        },
      ],
      table: {
        columns: [
          { type: 'selection', width: '55' },
          { label: '账单时间', align: 'center', prop: 'endDate' },
          { label: '账单编号', align: 'center', prop: 'customerCode' },
          { label: '客户名称', align: 'center', prop: 'customerName' },
          { label: '应收总金额', align: 'center', prop: 'paidAmount' },
          { label: '总票数', align: 'center', prop: 'totalVotes' },
          { label: '总件数', align: 'center', prop: 'totalPiece' },
          { label: '总实重', align: 'center', prop: 'totalWeight' },
          { label: '总材积重', align: 'center', prop: 'totalVolumeWeight' },
          { label: '总计费重', align: 'center', prop: 'totalChargeWeight' },
          { label: '业务员', align: 'center', prop: 'businessManager' },
          { label: '所属站点', align: 'center', prop: 'site' },
          { label: '账单状态', align: 'center', prop: 'status' },
          { label: '已收款金额', align: 'center', prop: '' },
          { label: '未收款金额', align: 'center', prop: '' },
          { label: '渠道', align: 'center', prop: '' },
          {
            label: '操作',
            align: 'center',
            width: '200',
            fixed: 'right',
            render(h, params) {
              const el = h(
                ElButton,
                {
                  type: 'primary',
                  text: true,
                  onClick: () => {
                    router.push({
                      name: 'AirSeaTransportDetail',
                      params: {
                        serialNo: params.row.serialNo,
                      },
                    })
                  },
                },
                {
                  default: () => '账单详情',
                },
              )
              return el
            },
          },
        ],
        event: {
          onSelectionChange: (rows) => {
            multipleSelection.value = rows
          },
        },
      },
      api: getSeaAirTransportFinanceAccountlist,
    }
  },
  set(val) {
    return val
  },
})

</script>